::-webkit-scrollbar{
    // eddit:这里好好的为什么要隐藏滚动条？
    // display: none;
}
/* 隐藏滚动条 */
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
/*字体横向位置*/
.float-left{
    float: left;
}
.float-right{
    float: right;
}
/* 浮动 */
.rotate-180{
transform: rotate(180deg);
-ms-transform: rotate(180deg);		/* IE 9 */
-webkit-transform: rotate(180deg);	/* Safari and Chrome */
-o-transform: rotate(180deg);		/* Opera */
-moz-transform: rotate(180deg);	
}
/* 翻转180度 */

.placeholder(@rule){
    outline: none;
    &::-webkit-input-placeholder {
        color: #c0c4cc;
        text-indent: 10px;
        line-height: 30px;
        @rule();
    }
    &:-ms-input-placeholder { // IE10+
        color: #c0c4cc;
        text-indent: 10px;
        line-height: 30px;        
        @rule();
    }
    &:-moz-placeholder { // Firefox4-18
        color: #c0c4cc;
        text-indent: 10px;
        line-height: 30px; 
        @rule();
    }
    &::-moz-placeholder { // Firefox19+
        color: #c0c4cc;
        text-indent: 10px;
        line-height: 30px;        
        @rule();
    }
}
/* 输入框提示语句样式 */

.transition(@time){
    transition: all @time;
    -moz-transition: all @time; /* Firefox 4 */
    -webkit-transition: all @time; /* Safari 和 Chrome */
    -o-transition: all @time; /* Opera */
}
/* 添加过渡 */


.border-1px(@color)
{
    position: relative;
  &:after{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid @color;
    content: ' ';
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    {
        transform: scaleY(0.33);
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2)
    {
        transform: scaleY(0.5);
    }
  }
}

/* 1像素边框 */

.border-none()
{
    &:after{
        display: none;
    }   
}
/* 删除一像素边框 */
  

.bg-image(@url)
{
    background-image: url('@{url}@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  {
    background-image: url('@{url}@3x.png');
  }
}
/* 设置背景 */

.ellipsis(@line) {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: @line;
}
/* 显示省略号 */


/*下面是洪总的*/

// 用来覆盖a链接的4个状态
.A-all-state(@rule) {
    &,
    &:hover,
    &:focus,
    &:visited,
    &:active {
        @rule();
    }
}

/*尺寸相关的：*/

/* xs | sm | md | lg*/

@screen-lg: 1280px;
@screen-md-max: @screen-lg - 1;
@screen-md: 960px;
@screen-sm-max : @screen-md - 1;
@screen-sm: 640px;
@screen-xs-max: @screen-sm - 1;
/*  注：
    lg的范围是 1280 <= lg
    md的范围是 960  <= md   <= 1279
    sm的范围是 640  <= sm   <= 959
    xs的范围是 xs   <= 640

    这里的4个函数，用来辅助各自屏幕下的样式，举例来说，
    p{
        color:black;
        .On-lg({
            color:red;
        });
    }
    那么p标签在lg的屏幕下文本会呈现红色，其他则呈现黑色，关于less传递规则的用法，可以参考(英文)：http://lesscss.cn/features/#detached-rulesets-feature
*/

// 在 lg 尺寸下的表现
.On-lg(@rule) {
    @media (min-width: @screen-lg) {
        @rule();
    }
}

// 在 md 尺寸下的表现
.On-md(@rule) {
    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
        @rule();
    }
}

// 在 sm 尺寸下的表现
.On-sm(@rule) {
    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
        @rule();
    }
}

// 在xs尺寸下的表现
.On-xs(@rule) {
    @media(max-width: @screen-xs-max) {
        @rule();
    }
}

// 在iPhone 5、iPhone 5s、iPhone SE上的表现
.On-5s(@rule){
    @media(max-width: 320px) {
        @rule();
    }
}

// 大于 lg 尺寸时候的表现
.Small-then-lg(@rule) {
    @media(max-width: @screen-md-max) {
        @rule();
    }
}

// 小于 md 尺寸时候的表现
.Small-then-md(@rule) {
    @media (max-width: @screen-sm-max) {
        @rule();
    }
}

// 小于 sm 尺寸时候的表现
.Small-then-sm(@rule) {
    .On-xs(@rule);
}

;
// 大于 md 尺寸时候的表现
.Bigger-then-md(@rule) {
    .On-lg(@rule);
}

// 大于 sm 尺寸时候的表现
.Bigger-then-sm(@rule) {
    @media(min-width: @screen-md) {
        @rule();
    }
}

// 大于 xs 时候尺寸的表现
.Bigger-then-xs(@rule) {
    @media(min-width: @screen-sm) {
        @rule();
    }
}

// 最多显示n行的文本
.Mult-line(@line){
      overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: @line;
        -webkit-box-orient: vertical;
}







// -------------------------------------------------------------------------
// 当视口在 md 及以上尺寸时隐藏
.hidden-md-and-up {
    .Bigger-then-sm( {
        display: none !important;
    }
    );
}

// 当视口在 sm 及以下尺寸时隐藏
.hidden-sm-and-down {
    .Small-then-md( {
        display: none !important;
    }
    );
}

.hidden-in-xs {
    .On-xs( {
        display: none !important;
    }
    )
}

// 只显示行的文本，超出显示省略号
// 需要注意的是，被赋予该类的组件需要有"display:block"规则，如果该节点必须显示为其他，那么可以将该class赋予其父元素
.one-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 只在 lg 尺寸屏幕上显示的内容
.lg-only {
    .Small-then-lg( {
        display: none !important;
    }
    );
}

// 只在 md 尺寸屏幕上显示的内容
.md-only {
    .Small-then-md( {
        display: none !important;
    }
    );
    .Bigger-then-md( {
        display: none !important;
    }
    );
}

// 只在 sm 尺寸屏幕上显示的内容
.sm-only {
    .Small-then-sm( {
        display: none !important;
    }
    );
    .Bigger-then-sm( {
        display: none !important;
    }
    );
}

// 只在 xs 尺寸屏幕上显示的内容
.xs-only {
    .Bigger-then-xs( {
        display: none !important;
    }
    );
}